/* 
1 静态页面渲染
  1 轮播图
    1 发送请求获取接口当中的数据 
    2 学习 轮播图插件改怎么使用 
    3 轮播图有个bug
      1 如果第一次渲染的时候 是空数组的话 那么后期数组有值了,虽然页面有效果,但是自动播放 失效!! 
    4 如何优雅的解决 
      1 条件渲染  数组有值之后 轮播图才渲染 
 */


import React from "react"
import { Carousel } from 'antd-mobile';

// 引入导航栏的本地图片
import nav1Src from "../../assets/images/nav-1.png"
import nav2Src from "../../assets/images/nav-2.png"
import nav3Src from "../../assets/images/nav-3.png"
import nav4Src from "../../assets/images/nav-4.png"

import indexCss from "./index.module.scss"

// 引入封装的axios基准路径等
import { baseURL, request } from '../../utils/request'

// 引入城市搜索组件
import CitySearch from '../../components/CitySearch'

class KZCarousel extends React.Component {
    state = {
        imgHeight: 176,         //轮播图图片高度
        swiperList: [],         //轮播图数据  
        navList: [
            { id: 1, title: "整租", imgSrc: nav1Src },
            { id: 2, title: "合租", imgSrc: nav2Src },
            { id: 3, title: "地图找房", imgSrc: nav3Src },
            { id: 4, title: "去出租", imgSrc: nav4Src }
        ],
        rentList: [],            //租房数据
        newsList: []             //最新资讯数据
    }

    componentDidMount() {
        this.getSwpier();
        this.getRentGroup();
        this.getNews();
    }

    //获取轮播图数据
    async getSwpier() {
        const res = await request.get('/home/swiper')
        // console.log(res);
        // 把数据更新到state中
        this.setState({
            // swiperList: res.data.body
            // 🚩4.axios封装-简化接口的返回值
            swiperList: res.body
        })
        // console.log(this.state.swiperList);
    }

    //租房小组数据
    async getRentGroup() {
        let res = await request.get('/home/groups')
        // console.log(res);
        this.setState({
            rentList: res.body
        })
    }

    // 获取最新资讯数据
    async getNews() {
        const res = await request.get('/home/news')
        // console.log(res);
        this.setState({
            newsList: res.body
        })
    }


    render() {
        //解构state中的数据 
        const { swiperList, navList, rentList, newsList } = this.state;

        return (
            <div className="wrapper">
                {/* 轮播图 start */}
                <div className={indexCss.swiper} >
                    {/* 搜索框 应该在轮播图中 嵌套wrap方便定位*/}
                    <div className={indexCss.city_search_wrapper}>
                        {/* 使用城市搜索组件 */}
                        <CitySearch></CitySearch>
                    </div>

                    {/* 解决轮播图不自动轮播bug--条件渲染 当数组有值的时候才渲染结构*/}
                    {swiperList.length && <Carousel
                        autoplay
                        infinite
                    >
                        {swiperList.map(value => (
                            <a
                                key={value}
                                href="#"
                                style={{ display: 'inline-block', width: '100%', height: this.state.imgHeight }}
                            >
                                <img
                                    src={baseURL + value.imgSrc}
                                    alt="加载中"
                                    style={{ width: '100%', verticalAlign: 'top' }}
                                    onLoad={() => {
                                        // fire window resize event to change height  删不得，跟屏幕自适应高度有关
                                        window.dispatchEvent(new Event('resize'));
                                        this.setState({ imgHeight: 'auto' });
                                    }}
                                />
                            </a>
                        ))}
                    </Carousel>}
                </div>
                {/* 轮播图 end */}
                {/* 导航 start */}
                <div className={indexCss.nav}>
                    {navList.map(v => <div className={indexCss.nav_item} key={v.id}>
                        <img className={indexCss.nav_item_img} src={v.imgSrc} />
                        <div className={indexCss.nav_item_title}>{v.title}</div>
                    </div>)}
                </div>
                {/* 导航 end */}
                {/* 租房小组 start */}
                <div className={indexCss.rent_group}>
                    <div className={indexCss.rent_group_title}>
                        <span className={indexCss.rent_group_title_left}>租房小组</span>
                        <span className={indexCss.rent_group_title_more}>更多</span>
                    </div>
                    <div className={indexCss.rent_group_content}>
                        {rentList.map(v => <div className={indexCss.rent_group_item} key={v.id}>
                            <div className={indexCss.rent_group_item_info}>
                                <div className={indexCss.rent_group_item_info_title}>{v.title}</div>
                                <div className={indexCss.rent_group_item_info_desc}>{v.desc}</div>
                            </div>
                            <div className={indexCss.rent_group_item_img}>
                                <img src={baseURL + v.imgSrc} alt="" />
                            </div>
                        </div>
                        )}
                    </div>
                </div>
                {/* 租房小组 end */}
                {/* 最新资讯 start */}
                <div className={indexCss.news}>
                    <div className={indexCss.news_title}>最新资讯</div>
                    <div className={indexCss.news_content}>
                        {newsList.map(v =>
                            <div className={indexCss.news_item} key={v.id}>
                                <div className={indexCss.news_item_img}>
                                    <img src={baseURL + v.imgSrc} alt="" />
                                </div>
                                <div className={indexCss.news_item_info}>
                                    <div className={indexCss.news_item_info_title}>{v.title}</div>
                                    <div className={indexCss.news_item_info_desc}>
                                        <div className={indexCss.news_item_info_desc_from}>{v.from}</div>
                                        <div className={indexCss.news_item_info_desc_date}>{v.date}</div>
                                    </div>
                                </div>
                            </div>
                        )}
                    </div>
                </div>
                {/* 最新资讯 end */}
            </div>
        );
    }
}

export default KZCarousel;